<template>
    <div>
        <div class="headerSty1" style="margin: 20px 0 10px;">
            <div class="headerLeftSty">
                <div class="textSty">签订合同</div>
            </div>
            <div>
                <el-form>
                    <el-row>
                        <el-col :span="18">
                            <el-form-item label-width="40px">
                                <div class="headerSty" style="margin: 20px 0 10px;">
                                    <div class="headerLeftSty">
                                        <div class="navSty"></div>
                                        <div class="textSty1">合同上传</div>
                                    </div>
                                </div>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item label="" label-width="40px">
                                <el-table :data="signedContractList" style="width: 100%" :loading="tableLoading">
                                    <el-table-column type="index" label="序号" width="80">
                                    </el-table-column>
                                    <el-table-column prop="customerName" label="单位">
                                    </el-table-column>
                                    <el-table-column label="金额">
                                        <template slot-scope="scope">
                                            {{
                            scope.row.amountType == 1 ? scope.row.totalAmount :
                                scope.row.perSquareMeterTotalAmount
                        }}
                                        </template>
                                    </el-table-column>
                                    <el-table-column prop="filePath" label="合同状态">
                                        <template slot-scope="scope">
                                            {{ scope.row.filePath ? ' 已上传' : '未上传' }}
                                        </template>
                                    </el-table-column>
                                    <el-table-column prop="uploadTime" label="上传时间">
                                    </el-table-column>
                                    <el-table-column label="操作">
                                        <template slot-scope="scope">
                                            <el-upload class="upload-demo" :limit="10" :action="uploadUrl"
                                                :before-remove="beforeRemove" :file-list="fileList"
                                                :on-success="handleFileSuccess" :before-upload="beforeAvatarUpload"
                                                :show-file-list="false">
                                                <el-button size="mini" type="text">合同上传</el-button>
                                            </el-upload>
                                            <el-button size="mini" type="text" @click="contractDownload(scope.row)"
                                                v-if="scope.row.filePath">合同下载</el-button>
                                        </template>
                                    </el-table-column>
                                </el-table>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item label-width="40px">
                                <div class="headerSty" style="margin: 20px 0 10px;">
                                    <div class="headerLeftSty">
                                        <div class="navSty"></div>
                                        <div class="textSty1">付款计划</div>
                                    </div>
                                    <el-button type="primary" size="mini"
                                        @click="handleAddPaymentSchedule">添加付款计划</el-button>
                                </div>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item label="" label-width="40px">
                                <el-table :data="paymentPlanList" style="width: 100%">
                                    <el-table-column type="index" label="序号" width="180" align="center" />
                                    <el-table-column prop="planName" label="计划名称" width="180" align="center" />
                                    <el-table-column prop="paymentRatio" label="付款比例(%)" width="180" align="center" />
                                    <el-table-column prop="paymentAmount" label="付款金额" align="center" />
                                    <el-table-column prop="accountsPayableDate" label="应付款日期" align="center" />
                                    <el-table-column prop="remark" label="备注" align="center" />
                                    <el-table-column label="操作" align="center">
                                        <template slot-scope="scope">
                                            <el-button size="mini" type="text" @click="deletePay(scope.row.id)">删除</el-button>
                                        </template>
                                    </el-table-column>
                                </el-table>
                            </el-form-item>

                        </el-col>
                        <el-col :span="24">
                            <el-form-item label-width="40px">
                                <el-button type="primary" @click="subPayUpload">提交</el-button>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </div>
        </div>
        <addPaymentSchedule v-if="addPaymentScheduleVisible" ref="addPaymentSchedule"
            @refreshAddPaymentSchedule="refreshAddPaymentSchedule"></addPaymentSchedule>
    </div>
</template>
<script>
import addPaymentSchedule from './addPaymentSchedule.vue';
import { getPaymentPlan, getUpAnnex, saveUpAnnex, deletePaymentPlan, getSignedContract } from "@/api/contract/contractOrg";

export default {
    components: { addPaymentSchedule },
    props: {
        dataForm: {
            type: Object,
            default: {},
        }
    },
    data() {
        return {
            form: {},
            // 表单校验
            rules: {},
            addPaymentScheduleVisible: false,
            tableData: [],
            // 上传参数
            uploadUrl: process.env.VUE_APP_BASE_API + "/common/upload",
            uploadList: [],
            fileList: [],
            paymentPlanList: [],
            signedContractList: [],
            // baseUrl: 'http://192.168.3.218:8082',
            tableLoading: false
        }
    },
    created() {
        this.getList()
    },
    methods: {
        // 添加付款计划
        handleAddPaymentSchedule() {
            this.addPaymentScheduleVisible = true;
            this.$nextTick(() => {
                this.$refs.addPaymentSchedule.init(this.dataForm.id);
            });
        },
        getList() {
            // 查询合同上传
            this.tableLoading = true
            getSignedContract(this.dataForm.id).then(res => {
                this.signedContractList = [res.data]
                this.tableLoading = false
            })
            // 查询付款计划
            getPaymentPlan(this.dataForm.id).then(res => {
                this.paymentPlanList = res.data
            })
        },
        // 合同下载
        contractDownload(row) {
            this.$download.resource(row.filePath, row.fileName);
        },
        // 移除上传
        beforeRemove(file, fileList) {
            this.uploadList = fileList
        },
        // 文件上传成功处理
        handleFileSuccess(response, file, fileList) {
            this.uploadList = fileList
            this.saveContract()

        },
        // 文件上传前的大小
        beforeAvatarUpload(file) {
            const isRAR = file.type === 'application/x-rar-compressed';
            const isZIP = file.type === 'application/zip';
            const isMSOffice = file.type === 'application/vnd.openxmlformats-officedocument.wordprocessingml.document' || // .docx  
                file.type === 'application/vnd.ms-word' || // .doc  
                file.type === 'application/pdf'; // .pdf  
            const isAccepted = isRAR || isZIP || isMSOffice;
            const isLt2M = file.size / 1024 / 1024 < 20;
            if (!isAccepted) {
                this.$message.error('上传文件格式不正确，请上传 .rar、.zip、.doc、.docx 或 .pdf 格式的文件！');
            }
            if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过 20MB!');
            }
            return isAccepted && isLt2M;
        },
        saveContract() {
            // 保存附件
            if (this.uploadList.length) {
                let annexList = []
                for (let i = 0; i < this.uploadList.length; i++) {
                    if (this.uploadList[i].response) {
                        annexList.push({
                            fileName: this.uploadList[i].name,
                            filePath: this.uploadList[i].response.fileName,
                            type: 1
                        })
                    } else {
                        annexList.push({
                            fileName: this.uploadList[i].name,
                            filePath: this.uploadList[i].url,
                            type: 1
                        })
                    }
                }
                saveUpAnnex({ contractId: this.dataForm.contractId, annexList }).then(res => {
                    this.getList()
                })
            }

        },
        // 添加完成刷新
        refreshAddPaymentSchedule() {
            this.addPaymentScheduleVisible = false;
            this.getList()
        },
        // 删除计划
        deletePay(id) {
            deletePaymentPlan(id).then(res => {
                this.getList()
            })
        },
        // 提交
        subPayUpload() {
            this.form.status = this.form.status > 7 ? this.form.status : 8
            this.$nextTick(() => {
                this.$emit('refreshSignature', { ...this.dataForm, ...this.form })
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.headerSty {
    display: flex;
    justify-content: space-between;
    width: 97%;

    .headerLeftSty {
        display: flex;
        align-items: center;

        .textSty {
            margin-left: 8px;
            font-size: 16px;
            font-weight: 700;
        }


    }

}

.headerSty1 {
    width: 97%;

    .headerLeftSty {
        display: flex;
        align-items: center;

        .textSty1 {
            margin-left: 8px;
            font-size: 14px;
            font-weight: 700;
        }

        .textSty {
            margin-left: 8px;
            font-size: 16px;
            font-weight: 600;
        }
    }

}

.navSty {
    height: 15px;
    width: 5px;
    background: rgb(90, 156, 248);
}


.contSty {
    display: flex;

    .contLeftSty {
        height: 80px;
        width: 5px;
        background: rgb(90, 156, 248);
    }

    .allBlo {
        margin-left: 5px;
    }

    .LastBlockSty {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 132px;
        height: 30px;
        background: white;
        border-radius: 5px;
        color: rgb(90, 156, 248);
        border: 1px solid rgb(90, 156, 248);

        .el-icon-warning {
            color: rgb(90, 156, 248);
            font-weight: bolder;
            margin-right: 5px;
            font-size: 18px;
        }
    }

    .blockSty {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 132px;
        height: 30px;
        background: rgb(90, 156, 248);
        border-radius: 5px;
        color: white;

        .el-icon-check {
            color: white;
            font-weight: bolder;
            margin-right: 5px;
            font-size: 18px;
        }

        .el-icon-close {
            color: white;
            font-weight: bolder;
            margin-right: 5px;
            font-size: 18px;
        }
    }

    .lastTeSty {
        flex: 1;
        height: 120px;
        background: white;
        margin-left: 10px;
        border-radius: 5px;
        border: 1px solid rgb(90, 156, 248);
        overflow-y: auto;
    }
}

.text1 {
    font-size: 14px;
    font-weight: 500;
}

.text2 {
    font-size: 14px;
    color: #999;
}

.el-icon-arrow-right {
    color: rgb(90, 156, 248);
    font-weight: bolder;
    margin: 0 10px;
    font-size: 32px;
}
</style>